import React, { useState } from 'react';
import { InputNumber, Card, Input, Button, Space } from 'antd';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import AceEditor from 'react-ace';

import 'brace/mode/javascript';
import 'brace/theme/monokai';

const CodeNote = () => {
  const [notes, setNotes] = useState({});

  const handleNoteChange = (lineNumber, noteContent) => {
    setNotes({
      ...notes,
      [lineNumber]: noteContent,
    });
  };

  const renderCodeEditor = () => {
    // 用你的代码替换这个字符串
    const code = `const a = 10;
const b = 20;
const sum = a + b;`;

    return (
      <AceEditor
        mode='javascript'
        theme='monokai'
        value={code}
        width='100%'
        height='100%'
        readOnly={true}
      />
    );
  };

  const renderNotes = () => {
    return Object.entries(notes).map(([lineNumber, noteContent]) => (
      <Card
        key={lineNumber}
        title={`Line ${lineNumber}`}>
        <pre>{/* 显示代码预览 */}</pre>
        <Input.TextArea
          value={noteContent}
          onChange={e => handleNoteChange(lineNumber, e.target.value)}
        />
        <Space>
          <Button type='primary'>确定</Button>
          <EditOutlined />
          <DeleteOutlined />
        </Space>
      </Card>
    ));
  };

  return (
    <div style={{ display: 'flex' }}>
      <div style={{ flex: 1, paddingRight: '1rem' }}>{renderCodeEditor()}</div>
      <div style={{ flex: 1, paddingLeft: '1rem' }}>
        <div>
          <InputNumber
            min={1}
            onChange={lineNumber => handleNoteChange(lineNumber, '')}
            placeholder='Line Number'
          />
        </div>
        {renderNotes()}
      </div>
    </div>
  );
};

export default CodeNote;
